<template>
	<view class="con">
		<view>
			<view class="qrimg">
				<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
					:background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
					:iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
					@result="qrR" />
			</view>
		</view>
		<canvas class="can" canvas-id="firstCanvas"></canvas>
		<view @click="appShare" class="btn">分享</view>
		<!-- <canvas canvas-id="qrcode" v-if ="url == '' " style="opacity: 1;"></canvas> -->
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				url: "",
				ifShow: true,
				val: '', // 要生成的二维码值
				size: 300, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#333333', // 前景色
				pdground: '#333333', // 角标色
				icon: '', // 二维码图标
				iconsize: 170, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				recommendCode: ''
			}
		},
		onLoad(e) {
			let code = uni.getStorageSync("user").recommendCode
			this.val = "/pages/login/register?code=" + code
			this.recommendCode = code
		},
		methods: {
			navback() {
				uni.navigateBack({
					delta: 1
				})
			},
			qrR(e) {
				this.src = e
				this.toDrawCanvas()
			},
			//绘制canvas
			toDrawCanvas() {
				let that = this
				let ctx = uni.createCanvasContext('firstCanvas', this) //后来又做了一个分享的项目，发现不加this就不能用
				//uni.upx2px()是尺寸单位转换方法，622为rpx单位，换成px为311，根据设计稿来编辑
				let canvaWidth = uni.upx2px(500)
				let canvaHight = uni.upx2px(725)
				//绘制文字居中对齐使用，和下面的ctx.textAlign的对齐方式有关，中间就以中间为定位，左边就以左边为定位
				let centerCode = uni.upx2px(250)
				let xx = uni.upx2px(64)
				let yy = uni.upx2px(48)
				let font = uni.upx2px(40) //字体大小
				let yzmtop = uni.upx2px(80)
				let yzmleft = uni.upx2px(232)
				let imgurl = '../../../static/bg/card.png' //设置背景图的路径
				ctx.drawImage(imgurl, 0, 0, canvaWidth, canvaHight)


				//绘制您的邀请码文字
				ctx.setFillStyle('#333333') //文字颜色
				ctx.setFontSize(font)
				ctx.textAlign = "center" //居中，而且这个需要放在ctx.setFontSize()后面，其他api就没去一一使用过
				//绘制文字ctx.fillText(需要绘制的文字,x轴距离,y轴距离);
				ctx.fillText("您的邀请码", centerCode, yzmtop);


				//绘制邀请码文字
				let yqmwenzix = uni.upx2px(250)
				let yqmwenziy = uni.upx2px(150)
				let yamcodes = this.recommendCode //这个是放邀请码
				ctx.setFillStyle('#F09238')
				ctx.setFontSize(font)
				ctx.textAlign = "center"
				ctx.fillText(yamcodes, yqmwenzix, yqmwenziy);

				//绘制二维码位置
				let erweimaimg = this.src
				let towCodeX = uni.upx2px(70) //距离左边的位置
				let towCodeY = uni.upx2px(250) //距离顶部的的位置
				let towCodeW = uni.upx2px(360) //二维码的宽度
				ctx.drawImage(erweimaimg, towCodeX, towCodeY, towCodeW, towCodeW)


				//绘制扫码下载APP文字
				let apploady = uni.upx2px(700)
				ctx.setFillStyle('#333333')
				let size = uni.upx2px(32)
				ctx.setFontSize(size)
				ctx.textAlign = "center"
				ctx.fillText("扫码下载APP", yqmwenzix, apploady);
				//绘制分享好友文字
				let shareY = uni.upx2px(890)
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(font)
				ctx.textAlign = "center"
				ctx.fillText("分享好友", yqmwenzix, shareY);
				ctx.draw() //结束绘画
			},
			//分享点击
			appShare() {
				let code = uni.getStorageSync("user").recommendCode
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: (res) => {
						//返回文件路径
						that.imageUrl = res.tempFilePath
						//保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								console.log("res", res)
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存失败'
								})
							}
						})
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: "http://192.168.2.5:8082/#/?code="+code,
							title: "社区在线的分享",
							summary:"我正在使用社区在线APP，快来加入吧",
							imageUrl:res.tempFilePath,
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					}
				})
			}
		}
	}
</script>

<style>
	.btn {
		width: 550rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 35px;
		margin-left: 100rpx;
		margin-top: 60rpx;
		color: #FFF;
		line-height: 70rpx;
		text-align: center;
	}

	.qrimg {
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.can {
		width: 500rpx;
		height: 725rpx;
		margin-left: 125rpx;
	}

	.con {
		background-color: #F6F6F6;
		min-height: 100vh;
		padding-top: 200rpx;
	}
</style>
